.main-container {
  background: #EEEEEE;
  display: flex;
  flex-wrap: wrap;
  .half-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .card-wrap {
    padding: 5px;
    flex: 1;
    .card-content {
      background: #fff;
      height: 37vh;
      .content-title {
        height: 45px;
        border-bottom: 1px solid #E9E9E9;
        font-size: 14px;
        padding: 6px 20px;
        line-height: 32px;
        .temp-btn {
          float: right;
        }
      }

      .main-wrap {
        width: 100%;
        height: calc(100% - 45px);
        position: relative;
        padding: 20px 0;
        //img {
        //  width: 100%;
        //  height: 100%;
        //  object-fit: fill;
        //}
        .text-box {
          position: absolute;
          color: #fff;
          height: 20px;
        }
        .after-box {
          top: 32%;
          left: 21%;
        }
        .before-box {
          bottom: 10%;
          left: 28%;
        }
        .degree-box {
          bottom: 27.5%;
          left: 59%;
        }
        .main-info-wrap {
          display: flex;
          height: 100%;
          padding: 15px 10px;
          justify-content: center;
          align-items: center;
          ul {
            list-style: none;
            flex: 1;
            padding: 0 3px;
            border-radius: 6px;
            li {
              height: 42px;
              border: 1px solid #E9E9E9;
              display: flex;
              &:not(:last-child) {
                border-bottom: none;
              }
              span {
                display: inline-block;
                padding: 0 10px;
                font-size: 12px;
                color: #666;
                line-height: 42px;
              }
              .label {
                width: 95px;
                background: #F7F7F7;
                text-align: center;
                border-right: 1px solid #E9E9E9;
              }
              .value {
                flex: 1;
                text-align: left;
                white-space: nowrap;
              }
            }
          }
          .sub-box {
            flex: 1;
            margin-left: 5px;
            border-left: 1px solid #cccccc;
            padding-left: 15px;
          }
          .control-box {
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .control-item {

            }
          }
        }
        .title {
          font-size: 15px;
          font-weight: 600;
          display: flex;
          justify-content: space-around;
        }
        .gate-wrap {
          //background-image: url(../../../../../assets/images/map/monitor/gate-bg1.png);
          //background-size: contain;
          //background-repeat: no-repeat;
          //width: 45%;
          //height: 160px;
          //position: relative;

          .gate-box {
            position: absolute;
            width: 34px;
            height: 46px;
            top: 56px;
            left: 174px;

            .gate {
              height: 70px;
              background-image: url(../../../../../assets/images/map/monitor/gate.png);
              background-position: top;
              background-size: cover;
            }

            .gate-dangban {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
            }
          }

          .water-box {
            background-image: url(../../../../../assets/images/map/monitor/water1.png);
            background-repeat: no-repeat;
            background-size: 100%;
            position: absolute;
            bottom: 24px;
            width: 100%;
            height: 38px;

            .water {
              background-color: #54aef6;
              opacity: 0.4;
              margin: 15px 83px 0;
              height: 18px;
            }
          }
        }

        .diagram-gate {
          position: relative;
          margin: 0 50px;

          .gate-bg {
            width: 100%;
          }

          .gate-box {
            position: absolute;
            width: 8%;
            height: 35%;
            top: 121px;

            .gate {
              height: 70px;
              background-image: url(../../../../../assets/images/map/monitor/gate.png);
              background-position: top;
              background-size: cover;
            }

            .gate-dangban {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
            }
          }

          .gate-wrap1 {
            .gate-box {
              top: 43%;

              &:nth-of-type(1) {
                left: 46%;
              }
            }
          }

          .water-box {
            position: absolute;
            left: 0;
            bottom: 4px;

            &.water-box1 {
              bottom: 19px;
            }
            img {
              width: 100%;
            }

            .water {
              background-color: #54aef6;
              opacity: 0.4;
              margin: 0 auto;
              height: 30px;
            }

            .water1 {
              width: 432px;
            }
          }

        }
      }
    }

    .card-right-content {
      height: calc(74vh + 10px);
    }
  }
}
.tab-date-picker {
  margin-right: 5px;
}
.tab-extra-btn {
  margin-right: 10px;
}
.tab-water-table {
  margin: 0 10px;
}
::ng-deep nz-divider.custom-divider {
  margin: 0;
}
